<template>
  <div class="container">
    <div class="app-container">
      <el-card class="box-card">
        <el-row type="flex" justify="space-between">
          <el-col :span="24">
            <el-button size="medium" type="primary" @click="add(null,'add')">添加客户</el-button>
          </el-col>
          <el-col :span="24">
            <el-row type="flex">
              <el-select v-model="agent" placeholder="全部经纪" @change="searchFn">
                <el-option value="">全部经纪</el-option>
                <el-option
                  v-for="item in agentList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
              <el-input v-model="name_contains" placeholder="请输入关键字" @change="search">
                <el-button slot="append" @click="search">筛选</el-button>
              </el-input>
            </el-row>
          </el-col>
        </el-row>
        <el-divider />
        <el-table :data="agentsList" style="width: 100%" border>
          <el-table-column align="center" label="图片" prop="image">
            <template v-slot="{row}">
              <el-image :src="row.image" style="width: 150px; height: 150px" />
            </template>
          </el-table-column>
          <el-table-column align="center" label="名称" prop="name" />
          <el-table-column align="center" label="邮箱" prop="email" />
          <el-table-column align="center" label="电话" prop="phone" />
          <el-table-column align="center" label="经纪" prop="agent.name" />
          <el-table-column align="center" label="微信" prop="wechat" />
          <el-table-column align="center" label="介绍" prop="desc" />
          <el-table-column align="center" label="操作">
            <template v-slot="{row}">
              <el-button size="mini" plain type="primary" @click="edit(row.id,'edit')">编辑</el-button>
              <el-button size="mini" plain type="danger" @click="del(row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-divider />
        <!-- 分页器 -->
        <el-row type="flex" justify="center">
          <el-pagination
            background
            layout="prev, pager, next"
            :total="total"
            @current-change="currentPage"
          />
        </el-row>
      </el-card>
      <!-- 添加、编辑客户弹窗 -->
      <el-dialog :title="title" :visible="showDialog" width="800px" @close="cancel">
        <el-form ref="form" :model="formData" :rules="rules">
          <el-form-item label="经纪" label-width="80px" prop="agent">
            <template>
              <el-select v-model="formData.agent" placeholder="请选择">
                <el-option
                  v-for="item in agentList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </template>
          </el-form-item>
          <el-form-item label="姓名" label-width="80px" prop="name">
            <el-input v-model="formData.name" />
          </el-form-item>
          <el-form-item label="邮箱" label-width="80px" prop="email">
            <el-input v-model="formData.email" />
          </el-form-item>
          <el-form-item label="电话" label-width="80px" prop="phone">
            <el-input v-model="formData.phone" />
          </el-form-item>
          <el-form-item label="微信" label-width="80px" prop="wechat">
            <el-input v-model="formData.wechat" />
          </el-form-item>
          <el-form-item label="描述" label-width="80px" prop="desc">
            <el-input v-model="formData.desc" type="textarea" rows="3" />
          </el-form-item>
          <el-form-item label="封面" label-width="80px" prop="image">
            <!-- 图片上传 -->
            <ImgUpload v-model="formData.image" />
          </el-form-item>
          <el-form-item>
            <el-row type="flex" justify="end">
              <el-button size="mini" type="primary" @click="submit">确定</el-button>
              <el-button size="mini" @click="cancel">取消</el-button>
            </el-row>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
  </div>

</template>

<script>
import { getClientList, getClient, addClient, clientDetails, updateClient, delClient } from '@/api/client'
import { getAgentsList } from '@/api/agents'
import ImgUpload from './components/img-upload.vue'
export default {
  components: { ImgUpload },
  data() {
    return {
      agentsList: [], // 客户列表
      limit: 2, // 每页的获取条数
      start: 0, // 开始获取的位置
      name_contains: '', // 模糊搜索title
      agent: '', // 筛选相关经纪, 传入经纪 id
      showDialog: false, // 控制弹窗显示
      formData: {
        agent: '', // 属于哪个客户人的id
        name: '', // 名称
        email: '', // 邮箱
        phone: '', // 电话
        wechat: '', // 微信
        desc: '', // 描述
        image: '' // 图片
      },
      rules: {
        name: [{ required: true, message: '该项不能为空', trigger: 'blur' }],
        email: [
          { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
        ],
        phone: [{
          pattern: /^(?:(?:\+|00)86)?1\d{10}$/, message: '请输入正确的手机号码', trigger: 'blur'
        }],
        desc: [{ required: true, message: '请输入描述', trigger: 'blur' }]
      },
      total: 1, // 客户总数量
      openTitle: '', // 弹窗标题
      agentList: '' // 经纪人列表
    }
  },
  computed: {
    title() {
      if (this.openTitle === 'add') {
        return '添加客户'
      } else {
        return '编辑客户'
      }
    }
  },
  created() {
    this.allFn()
  },
  methods: {
    allFn() {
      this.getClientList()
      this.getClient()
      this.getAgentsList()
    },
    async getAgentsList() { // 获取经纪人列表
      const res = await getAgentsList()
      this.agentList = res.data
    },
    async getClientList() { // 获取客户管理列表
      const res = await getClientList({
        _limit: this.limit,
        _start: this.start,
        name_contains: this.name_contains || [],
        agent: this.agent || []
      })
      this.agentsList = res.data
    },
    async getClient() { // 获取客户数量
      const res = await getClient({
        name_contains: this.name_contains || [],
        agent: this.agent || []
      })
      this.total = res.data * 5
    },
    async currentPage(val) { // 点击分页实现功能
      this.start = (val - 1) * this.limit
      await this.getClientList()
    },
    add(id, txt) { // 添加
      this.openTitle = txt
      this.showDialog = true
    },
    async submit() { // 确认添加
      // 表单校验
      await this.$refs.form.validate()
      if (this.openTitle === 'edit') {
        await updateClient(this.formData)
        this.$message.success('修改客户成功')
      } else {
        await addClient(this.formData)
        // 提示
        this.$message.success('添加客户成功')
      }
      // 退出弹窗
      this.cancel()
      // 刷新列表
      this.allFn()
    },
    cancel() { // 关闭弹窗
      this.showDialog = false
      // 清空表单数据
      this.formData = {
        agent: '', // 属于哪个客户人的id
        name: '', // 名称
        email: '', // 邮箱
        phone: '', // 电话
        wechat: '', // 微信
        desc: '', // 描述
        image: '' // 图片
      }
    },
    searchFn() { // 经纪人搜索
      this.allFn()
    },
    search() { // 关键字模糊搜索
      this.getClientList()
      this.getClient()
    },
    async edit(id, txt) { // 数据回显
      this.openTitle = txt
      const res = await clientDetails(id)
      this.formData = res.data
      this.showDialog = true
    },
    async del(id) { // 删除客户
      await delClient(id)
      this.$message.success('删除成功')
      // 刷新列表
      this.getClient()
      this.getClientList()
    }
  }
}
</script>

<style lang="scss" scoped>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
